<template>
  <div class="index">
    <div class="backBtn" @click.stop.prevent="goBack">返回</div>
    <div class="title">医疗健康</div>
    <div class="deer"></div>
    <div class="module_box">
      <div class="wx" @click.stop.prevent="goWx">
        <img class="icon" src="@/assets/wx_icon.png" alt="" />
        <div class="text">微信</div>
        <img class="arrow" src="@/assets/arrow_icon.png" alt="" />
      </div>
      <div class="zfb">
        <img class="icon" src="@/assets/zfb_icon.png" alt="" />
        <div class="text">支付宝</div>
        <img class="arrow" src="@/assets/arrow_icon.png" alt="" />
      </div>
      <div class="wst">
        <img class="icon" src="@/assets/wst_icon.png" alt="" />
        <div class="text">皖事通</div>
        <img class="arrow" src="@/assets/arrow_icon.png" alt="" />
      </div>
    </div>

    <div class="prompt">请选择任意一款APP进行模拟体验</div>
  </div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
// 引入wxjs
import wx from "weixin-js-sdk";
export default {
  name: "index",
  data() {
    return {};
  },
  created() {
    localStorage.removeItem("minutes");
    localStorage.removeItem("seconds");
    localStorage.removeItem("startTime");
    localStorage.removeItem("endTime");
  },
  mounted() {},

  methods: {
    async goClassification() {
      const share = {
        title: "每日新闻",
        desc: "2022年12月20日21:47:55每日新闻",
        share_url: "https://blogobs.88688.team/blog/l-logo-y.jpg",
      };
      location.replace(
        "https://connect.qq.com/widget/shareqq/index.html?url=" +
          encodeURIComponent(share.share_url) +
          "&title=" +
          share.title +
          "&desc=" +
          share.desc
      );
    },
    async goBack() {
      this.$router.push({
        path: "/health/healthIndex",
      });
    },
    async goWx() {
      this.$router.push({
        path: "/health/register/wx/index1",
      });
      // 可以在需要的时候调用这个方法来开始计时
      this.startTime = new Date();
      localStorage.setItem("startTime", this.startTime.getTime());
    },

    getShareInfo() {
      //获取url链接（如果有#需要这么获取）
      var url = encodeURIComponent(window.location.href.split("#")[0]);
      //获取url链接（如果没有#需要这么获取）
      // var url = encodeURIComponent(window.location.href);
      if (typeof url === "string") {
        console.log("str 是字符串类型");
      } else {
        console.log("str 不是字符串类型");
      }
      getData(url).then((res) => {
        console.log(res);
        wx.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: parseInt(res.data.timestamp), // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"], // 必填，需要使用的 JS 接口列表
        });
        wx.ready(() => {
          //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
          wx.onMenuShareAppMessage({
            title: "每日新闻",
            desc: "2022年12月20日21:47:55每日新闻",
            link: "http://www.ruizhihuitech.com/",
            imgUrl: "https://blogobs.88688.team/blog/l-logo-y.jpg",
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {},
            fail: function (reject) {
              alert(JSON.stringify(reject), "失败");
            },
          });
          //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
          wx.onMenuShareTimeline({
            title: "每日新闻",
            desc: "2022年12月20日21:47:55每日新闻",
            link: "http://www.ruizhihuitech.com/",
            imgUrl: "https://blogobs.88688.team/blog/l-logo-y.jpg",
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {},
          });
        });
        //错误了会走 这里
        wx.error(function (res) {
          console.log("微信分享错误信息", res);
          // alert('ready 失败:', res);
        });
      });
    },
    openShare() {
      this.getShareInfo();
    },
  },
};
</script>

<style scoped lang="less">
.index {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(@/assets/health/register/register_bg.png) no-repeat center;
  background-size: 100% 100%;
}
@media screen and (min-width: 440px) {
  .backBtn {
    position: absolute;
    top: 23px;
    left: 20px;
    width: 125px;
    height: 52px;
    background: url(@/assets/health/healthIndex/backBtn.png) no-repeat center;
    background-size: 100% 100%;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0px 1px 5px rgba(200, 121, 0, 0.5);
  }
  .title {
    position: absolute;
    top: 145px;
    left: 20px;
    font-family: Alimama FangYuanTi VF;
    font-weight: bold;
    font-size: 38px;
    color: #ffffff;
    line-height: 41px;
  }
  .deer {
    position: absolute;
    top: 73px;
    right: 40px;
    width: 113px;
    height: 185px;
    background: url(@/assets/health/register/register_deer.png) no-repeat center;
    background-size: 100% 100%;
  }
  .module_box {
    position: absolute;
    top: 225px;
    left: 50%;
    transform: translate(-50%);
    max-height: 380px;
    overflow-y: auto;
    padding: 0 5px;
    .wx {
      cursor: pointer;
      display: flex;
      align-items: center;
      // justify-content: space-around;
      width: 303px;
      height: 78px;
      background: linear-gradient(90deg, #6dc752 0%, #2fc203 100%);
      border-radius: 7px;
      margin-bottom: 15px;
      .icon {
        width: 45px;
        height: 45px;
        margin: 0 30px;
      }
      .text {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 30px;
        color: #ffffff;
        margin-right: 90px;
      }
      .arrow {
        width: 12px;
        height: 22px;
      }
    }
    .zfb {
      cursor: pointer;
      display: flex;
      align-items: center;
      // justify-content: space-around;
      background: linear-gradient(90deg, #2680ff 0%, #1575fb 100%);
      width: 303px;
      height: 78px;
      border-radius: 7px;
      margin-bottom: 15px;
      .icon {
        width: 45px;
        height: 45px;
        margin: 0 30px;
      }
      .text {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 30px;
        color: #ffffff;
        margin-right: 60px;
      }
      .arrow {
        width: 12px;
        height: 22px;
      }
    }
    .wst {
      cursor: pointer;
      display: flex;
      align-items: center;
      // justify-content: space-around;
      background: linear-gradient(90deg, #f27a85 0%, #e83948 100%);
      width: 303px;
      height: 78px;
      border-radius: 7px;
      margin-bottom: 15px;
      .icon {
        width: 45px;
        height: 45px;
        margin: 0 30px;
      }
      .text {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 30px;
        color: #ffffff;
        margin-right: 60px;
      }
      .arrow {
        width: 12px;
        height: 22px;
      }
    }
  }

  .prompt {
    width: 100%;
    position: absolute;
    top: 525px;
    // left: 50%;
    // transform: translate(-50%);
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 15px;
    color: #666666;
    text-align: center;
  }
}
@media screen and (max-width: 440px) {
  .backBtn {
    position: absolute;
    top: 46px;
    left: 40px;
    width: 251px;
    height: 105px;
    background: url(@/assets/health/healthIndex/backBtn.png) no-repeat center;
    background-size: 100% 100%;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 48px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0px 1px 5px rgba(200, 121, 0, 0.5);
  }
  .title {
    position: absolute;
    top: 270px;
    left: 40px;
    font-family: Alimama FangYuanTi VF;
    font-weight: bold;
    font-size: 76px;
    color: #ffffff;
    line-height: 82px;
  }
  .deer {
    position: absolute;
    top: 146px;
    right: 60px;
    width: 226px;
    height: 370px;
    background: url(@/assets/health/register/register_deer.png) no-repeat center;
    background-size: 100% 100%;
  }
  .module_box {
    position: absolute;
    top: 450px;
    left: 50%;
    transform: translate(-50%);
    max-height: 730px;
    overflow-y: auto;
    padding: 0 10px;

    .wx {
      cursor: pointer;
      display: flex;
      align-items: center;
      // justify-content: space-around;
      width: 606px;
      height: 157px;
      background: linear-gradient(90deg, #6dc752 0%, #2fc203 100%);
      border-radius: 15px;
      margin-bottom: 30px;
      .icon {
        width: 90px;
        height: 90px;
        margin: 0 60px;
      }
      .text {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 60px;
        color: #ffffff;
        margin-right: 180px;
      }
      .arrow {
        width: 25px;
        height: 45px;
      }
    }
    .zfb {
      cursor: pointer;
      display: flex;
      align-items: center;
      // justify-content: space-around;
      width: 606px;
      height: 157px;
      background: linear-gradient(90deg, #2680ff 0%, #1575fb 100%);
      border-radius: 15px;
      margin-bottom: 30px;
      .icon {
        width: 90px;
        height: 90px;
        margin: 0 60px;
      }
      .text {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 60px;
        color: #ffffff;
        margin-right: 120px;
      }
      .arrow {
        width: 25px;
        height: 45px;
      }
    }
    .wst {
      cursor: pointer;
      display: flex;
      align-items: center;
      // justify-content: space-around;
      width: 606px;
      height: 157px;
      background: linear-gradient(90deg, #f27a85 0%, #e83948 100%);
      border-radius: 15px;
      margin-bottom: 30px;
      .icon {
        width: 90px;
        height: 90px;
        margin: 0 60px;
      }
      .text {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 60px;
        color: #ffffff;
        margin-right: 120px;
      }
      .arrow {
        width: 25px;
        height: 45px;
      }
    }
  }

  .prompt {
    width: 100%;
    position: absolute;
    top: 1050px;
    // left: 50%;
    // transform: translate(-50%);
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 30px;
    color: #666666;
    text-align: center;
  }
}
</style>
